<template>
    <div class="hello" style="text-align: center">
        <el-button type="primary" style="margin: 30px auto" @click="handleDownloadData">导出excel</el-button>
    </div>
    <div class="tableList">
        <el-table :data="tableData" style="width: 100%; margin: auto">
            <el-table-column prop="date" label="date" width="180" />
            <el-table-column prop="name" label="name" width="180" />
            <el-table-column prop="address" label="address" width="180" />
            <el-table-column prop="age" label="age" width="180" />
            <el-table-column prop="height" label="height" width="180" />
        </el-table>
    </div>
</template>

<script>
export default {
    name: "excelExport",
    data() {
        return {
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1510 弄",
                    age: 18,
                    height: "180cm",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1510 弄",
                    age: 18,
                    height: "180cm",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1510 弄",
                    age: 18,
                    height: "180cm",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1510 弄",
                    age: 18,
                    height: "180cm",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1510 弄",
                    age: 18,
                    height: "180cm",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1510 弄",
                    age: 18,
                    height: "180cm",
                },
                
            ],
        };
    },
    methods: {
        handleDownloadData() {
            require.ensure([], () => {
                // 定义列头
                const tHeader = ["日期", "姓名", "地址", "年龄", "身高"];
                // 定义导出的数据
                const data = [
                    ["2016-05-02", "王小虎", "上海市普陀区金沙江路 1510 弄", "18", "180cm"],
                    ["2016-05-02", "王小虎", "上海市普陀区金沙江路 1510 弄", "18", "180cm"],
                    ["2016-05-02", "王小虎", "上海市普陀区金沙江路 1510 弄", "18", "180cm"],
                    ["2016-05-02", "王小虎", "上海市普陀区金沙江路 1510 弄", "18", "180cm"],
                    ["2016-05-02", "王小虎", "上海市普陀区金沙江路 1510 弄", "18", "180cm"],
                ];
                //
                const { export_json_to_excel } = require("../vendor/Export2Excel");
                // 调用方法，传入列头、数据、文件名称、sheet标签名称
                export_json_to_excel(tHeader, data, "导出excel列表demo", "sheet1");
            });
        },
    },
};
</script>
<style scoped>
.tableList {
    width: 1000px;
    padding: 30px;
    margin: auto;
}
</style>
